<template>
  <!-- 登录页面 -->
  <div>
    <div class="logo-wrap w">
      <router-link to="/" style="display: flex; align-items: center;">
        <img style="width: 50px;margin-top: -5px;margin-right: 5px;" src="../../static/img/logo.png"
          class="logo-wrap-img" />
        <div style="font-size: 24px;color: black;font-weight: 800;">优趣联盟</div>
      </router-link>
      <!-- <p>欢迎登录</p> -->
    </div>
    <div class="container-wrap">
      <img src="../../static/img/5e5b07e623de3.jpg" class="container-bg" alt="" />
      <Authen type="Register" />
    </div>
  </div>
</template>

<script>
  import store from '@/vuex/store';
  import { mapMutations, mapActions } from 'vuex';
  import Authen from "@/components/authentication"
  export default {
    name: 'Register',
      metaInfo:{
      title: '优趣联盟系统',
  },
    data () {
      return {
        formDate: {
          username: '',
          password: ''
        },
        ruleInline: {
          username: [
            { required: true, message: '请输入手机号', trigger: 'blur',  transform(value) {
              return value.trim();
            },}
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur' }
          ]
        }
      };
    },
    components:{
      Authen
    },
    methods: {
      ...mapActions(['login']),
      handleSubmit (name) {
          const {formDate:{username:phone,password}} = this
          if(!phone){
           return this.$Message.error('请输入手机号')
          }
          if(!phone.match(/^1[3456789]\d{9}$/)){
              return this.$Message.error('请正确的手机号')
          }
        this.login({phone,password})
      }
    },
    store
  };
  </script>

<style lang="scss" scoped>
.container {
  &-wrap {
    width: 100%;
    margin: 0 auto;
    height: 545px;
    position: relative;
    overflow: hidden;
  }

  &-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

.login-container {
  position: absolute;
  right: 200px;
}

.logo {
  &-wrap {
    padding: 10px 0
  }

  &-img {
    width: 150px
  }

}

.form {
  &-box {
    padding: 40px 50px;
    margin: 20px auto;
    background-color: #Fff;
  }
}

.main-btn {
  height: 50px;
  background-color: #e2231a;
  border-radius: 0;
}

.bottom {
  text-align: center;
  color: #bcbcbc;

  &-link {
    color: #e2231a;
  }
}</style>
